<template>
  <div>
    <common-head :title="$route.name"/>
    <div class="wrap">
      <van-contact-card
        :type="contactType"
        :name="contact.linkMan"
        :tel="contact.mobile"
        @click="onEdit"
      />
      <!-- 下单的商品 -->
      <div class="items">
        <van-card
          v-for="item in items"
          :key="item.goodsId"
          :num="item.number"
          :price="item.price"
          :title="item.name"
          :thumb="item.pic"
        />
      </div>
      <!-- /下单的商品 -->
      <!-- 提交订单 -->
      <van-submit-bar :price="$store.state.cart.price*100" button-text="提交订单" @submit="onSubmit" />
      <!-- /提交订单 -->
    </div>
  </div>
</template>

<script>
import CommonHead from '../../components/CommonHead.vue'
import { getDefaultContact, fetchContactDetail } from '@api'

export default {
  data () {
    return {
      contactType: 'add',
      contact: {
        linkMan: '',
        mobile: ''
      }
    }
  },
  created () {
    // 获取购物车数据
    this.$store.dispatch('cart/FETCH_CART_INFO', {
      token: this.getToken()
    })
    this.fetchDefaultContact()
  },
  methods: {
    onEdit () {
      // 点击进入收货地址列表切换或者新增联系人
      this.$router.push('/addressLists')
    },
    fetchDefaultContact () {
      /*
        假设 从 联系人 列表中 切换一个联系人。 参数中多一个contactId
        判断是否有 contactId
          没有 调用 获取默认联系人
          有 调用获取 联系人详情接口 传入 contactId
      */
      if (this.$route.query.contactId) {
        // 选择了 一个收货地址
        fetchContactDetail({
          id: this.$route.query.contactId,
          token: this.getToken()
        }).then(res => {
          if (res.data.code === 0) {
          // 有收货地址
            this.contact = res.data.data.info
            this.contactType = 'edit'
          }
        })
      } else {
        // 获取默认联系人
        getDefaultContact({
          token: this.getToken()
        }).then(res => {
          if (res.data.code === 0) {
          // 有收货地址
            this.contact = res.data.data.info
            this.contactType = 'edit'
          }
          if (res.data.code === 700) {
            this.contactType = 'add'
          }
        })
      }
    },
    onSubmit () {
      // 点击去支付
      alert('支付成功')
    }
  },
  computed: {
    // 购物车中已经选中的商品
    items () {
      return this.$store.state.cart.items.filter(item => item.selected)
    }
  },
  name: 'OrderCreate',
  components: { CommonHead }

}
</script>

<style lang="scss" scoped>
  .wrap{
    padding-top: 46px;
  }
</style>
